<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">考试状态</label>
              <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">写作</option>
                  <option value="1" selected="">阅读</option>
                  <option value="2">游戏</option>
                  <option value="3">音乐</option>
                  <option value="4">旅行</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">考试区县</label>
              <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">写作</option>
                  <option value="1" selected="">阅读</option>
                  <option value="2">游戏</option>
                  <option value="3">音乐</option>
                  <option value="4">旅行</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">考试机构</label>
              <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">写作</option>
                  <option value="1" selected="">阅读</option>
                  <option value="2">游戏</option>
                  <option value="3">音乐</option>
                  <option value="4">旅行</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">考试期号</label>
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 查询
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"
         href="javascript:;"
         layuimini-content-href="/static/exam/page/exam/exam_manager_export.html"
         data-title="数据导出" >数据导出</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;" layuimini-content-href="/static/exam/page/exam/sign_in.html" data-title="签到表" >签到表</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;" layuimini-content-href="/static/exam/page/exam/exam_details.html" data-title="查看考试" >查看考试</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="audit">申请延时</a>
    </script>

    <script type="text/html" id="start">

      <div class="layui-form-item" style="margin-top: 100px">
        <label class="layui-form-label">时间设置</label>
        <div class="layui-input-inline">
          <input type="text" name="date" id="start-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        </div>
      </div>
    </script>

  </div>
</div>

<!--申请延时模板-->
<script type="text/html" id="audit-temp">
  <div class="layui-form layuimini-form" style="padding: 10px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">考点名称</label>
      <div class="layui-input-block">
        <div class="layui-form-label" style="width: 100%;text-align: left">淮南职业技术学院</div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">考试时间</label>
      <div class="layui-input-block">
        <div class="layui-form-label" style="width: 100%;text-align: left">2020-09-01</div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开始时间(延迟后)</label>
      <div class="layui-input-inline">
        <input type="text" name="date" id="start-time" lay-verify="date" placeholder="hh-mm-ss" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">结束时间(延迟后)</label>
      <div class="layui-input-inline">
        <input type="text" name="date" id="end-time" lay-verify="date" placeholder="hh-mm-ss" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="u-p-t-10 text-center">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">申请延时</button>
      <button class="layui-btn layui-btn-primary" lay-submit lay-filter="saveBtn">取消</button>
    </div>
  </div>
</script>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },

    {
      'id': 10000,
      name: '(2021)安管人员区县新考第4299期淮南第839期1',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中',
      count: 10,
      jigou: '考试机构'
    },
  ]
  layui.use(['form', 'table', 'miniPage', 'element', 'laydate'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      laydate = layui.laydate,
      miniPage = layui.miniPage

    form.render();

    table.render({
      elem: '#currentTableId',
      // url: 'api/table.json',
      data: tableData,

      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '期号',minWidth: 300 },
        { field: 'date', title: '考试时间' },
        { field: 'date', title: '考试类型' },
        { field: 'state', title: '状态' },
        { field: 'state', title: '考试人数' },
        { field: 'state', title: '考试机构' },
        { title: '操作', minWidth: 300, toolbar: '#currentTableBar', align: 'center' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field)
      layer.alert(result, {
        title: '最终的搜索信息'
      })

      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          searchParams: result
        }
      }, 'data')

      return false
    })

    // 操作
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data
      if (obj.event === 'export') {
        console.log('导出数据')
      } else if (obj.event === 'audit') {
        var index = layer.open({
          title: '申请延时',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '400px'],
          content: $('#audit-temp').html(),
          success: function () {
            form.render()
            laydate.render({
              elem: '#start-time',
              type: 'time'
            });
            laydate.render({
              elem: '#end-time',
              type: 'time'
            });
          }
        })
      }
    })

  })
</script>
